<template>
    <!-- 根据父组件传递的菜单名称,显示相应的图标 -->
    <!-- 实际业务开发中,一般将图标存在数据库中 -->
    <el-icon v-if="icon === '主页'">
        <House />
    </el-icon>
    <el-icon v-if="icon === '课程设计'">
        <Share />
    </el-icon>
    <el-icon v-else-if="icon === '书籍管理'">
        <Memo />
    </el-icon>
    <el-icon v-else-if="icon === '文件列表'">
        <Files />
    </el-icon>
    <el-icon v-else-if="icon === '实时天气'">
        <Lightning />
    </el-icon>
    <el-icon v-else-if="icon === '系统管理'">
        <Setting />
    </el-icon>
    <el-icon v-else-if="icon === '用户管理'">
        <UserFilled />
    </el-icon>
    <el-icon v-else-if="icon === '角色管理'">
        <Avatar />
    </el-icon>
    <el-icon v-else-if="icon === '菜单管理'">
        <Menu />
    </el-icon>
    <el-icon v-else-if="icon === '系统设置'">
        <Tools />
    </el-icon>
</template>

<script setup>
import { defineProps } from 'vue'

const props = defineProps({'icon': String})
</script>

<style scoped>

</style>